<template>
  <div class="change">
    <div class="navBar">
      <van-nav-bar title="肤质变化" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <a href="#" class="iconImg"
        ><img src="http://10.31.169.37:3000/images/mypage/？号图标.png" alt=""
      /></a>
    </div>
    <div class="bodyBox">
      <van-tabs v-model="active" title-active-color="white">
        <van-tab title="综合得分">
          <div class="record">
            <p>
              真棒！成功记录了1天的肤质数据。每周测肤2天就可以比较好地记录肤质变化了，测的天数越多越准哦~
            </p>
          </div>
          <div class="score">
            <!-- 综合得分 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>综合得分</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Summary />
            <!-- 700-440 -->
            <!-- 出油情况 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>出油情况</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Oil />
            <!-- 光滑度 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>光滑度</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Smooth />
            <!-- 黑眼圈 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>黑眼圈</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Eyes />
            <!-- 痘痘 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>痘痘</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Doudou />
            <!-- 黑头 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>黑头</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Heitou />
          </div>
        </van-tab>
        <van-tab title="出油状况"
          ><div class="record">
            <p>出油状况记录</p>
          </div>
          <div class="score">
            <!-- 出油情况 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>出油情况</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Oil />
          </div>
        </van-tab>
        <van-tab title="光滑度"
          ><div class="record">
            <p>光滑度记录</p>
          </div>
          <div class="score">
            <!-- 光滑度 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>光滑度</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Smooth />
          </div>
        </van-tab>
        <van-tab title="黑眼圈"
          ><div class="record">
            <p>黑眼圈记录</p>
          </div>
          <div class="score">
            <!-- 黑眼圈 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>黑眼圈</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Eyes />
          </div>
        </van-tab>
        <van-tab title="痘痘"
          ><div class="record">
            <p>痘痘记录</p>
          </div>
          <div class="score">
            <!-- 痘痘 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>痘痘</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Doudou />
          </div>
        </van-tab>
        <van-tab title="黑头"
          ><div class="record">
            <p>黑头记录</p>
          </div>
          <div class="score">
            <!-- 黑头 -->
            <div class="s-title">
              <i>
                <img
                  src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                  alt=""
                />
              </i>
              <em>黑头</em>
              <span>
                <button class="btn1 checked">日</button>
                <button class="btn2">周</button>
              </span>
            </div>
            <Heitou />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Tab, Tabs } from "vant";
Vue.use(NavBar);
Vue.use(Tab);
Vue.use(Tabs);
//echarts组件
// 引入echarts
import * as Echarts from "echarts";
Vue.prototype.$Echarts = Echarts;
import Summary from "../../components/mine/Summary.vue";
import Oil from "../../components/mine/Oil.vue";
import Smooth from "../../components/mine/Smooth.vue";
import Eyes from "../../components/mine/Eyes.vue";
import Doudou from "../../components/mine/Doudou.vue";
import Heitou from "../../components/mine/Heitou.vue";
export default {
  components: {
    Summary,
    Oil,
    Smooth,
    Eyes,
    Doudou,
    Heitou,
  },
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
  },
};
</script>
<style lang="less">
.navBar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.bodyBox {
  height: calc(100% - 46px);
  overflow: auto;
  position: fixed;
  left: 0;
  top: 46px;
  width: 100%;
  background-color: #fff;

  .iconImg {
    position: absolute;
    top: 10px;
    left: 320px;
    z-index: 900;
    img {
      width: 25px;
      height: 25px;
    }
  }
  .van-nav-bar__left .van-icon {
    font-size: 22px;
    color: #000;
  }
  .van-nav-bar__title {
    font-size: 18px;
  }
  .van-tabs__line {
    background-color: skyblue;
  }
  .van-tab--active {
    background-color: skyblue;
    border-radius: 20px;
  }
  .van-tab {
    height: 30px;
    line-height: 30px;
  }
  .van-tabs__nav {
    padding-bottom: 10px;
  }
  .record {
    padding: 15px;
    margin: 10px 15px;
    background: url("http://10.31.169.37:3000/images/mypage/真棒圆角矩形 2.png")
      no-repeat;
    background-size: cover;
    p {
      height: 65px;
      font-size: 16px;
      color: rgb(102, 102, 102);
      letter-spacing: 2px;
    }
  }
  .score {
    padding: 0 15px;
    .s-title {
      height: 25px;
      i {
        margin-right: 10px;
        img {
          height: 25px;
          vertical-align: middle;
        }
      }
      em {
        font-size: 20px;
        vertical-align: middle;
      }
      span {
        float: right;
        vertical-align: middle;
        height: 25px;
        button {
          height: 100%;
          width: 35px;
          background-color: transparent;
          border: 1px solid #dedede;
        }
        .btn1 {
          border-radius: 50% 0 0 50%;
        }
        .btn2 {
          border-radius: 0 50% 50% 0;
          background-color: #dedede;
          color: #fff;
        }
      }
    }
  }
  .checked {
    background-color: transparent;
  }
}
</style>
